<template>
  <el-select
    v-if="update"
    :value="value"
    filterable
    remote
    :multiple="limit"
    :disabled="disabled"
    @focus="remoteMethod(null)"
    @change="onChange"
    :placeholder="placeholder||'请搜索项目负责人'"
    :remote-method="remoteMethod"
    :loading="loading"
    value-key="id"
    style="width: 100%"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :value="item.id"
      :label="item.realname">
      <div><b style="min-width: 60px;display: inline-block">{{ item.realname }}</b> &nbsp; &nbsp;&nbsp;部门: <span
        style="min-width: 80px;display: inline-block">{{ item.dept_name }}</span> &nbsp;&nbsp;&nbsp;&nbsp;岗位:
        <span>{{ item.position_name }}</span></div>
    </el-option>
  </el-select>
</template>


<script>
//使用示例 editTable
export default {
  name: "PrincipalSelect",
  props: ['value', "customOptions", "limit", 'placeholder',"disabled"],
  watch: {
    customOptions(current) {
      this.options = current
    },
  },
  data() {
    return {
      loading: false,
      options: [],
      update: true
    }
  },
  mounted() {
    // this.customOptions?this.options = this.customOptions:false
    this.remoteMethod(null)
  },
  methods: {
    remoteMethod(query) {
      this.loading = true
      this.$http.get(`/user/index?limit=10`, {params: {realname: query}}).then((res) => {
        if (res.data.code == 0)
          this.options = res.data.data.filter(item => item.id !== 1)
        else
          this.$message.error(res.data.msg)
        this.loading = false
      });
    },
    onChange(val) {
      this.$emit('input', val)
    },
  },
}
</script>

<style scoped>

</style>
